@extends('layouts.app')

@section('content')
<div class="container" id="register">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">注册</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
                        {{ csrf_field() }}

                        <div class="form-group" >
                            <label for="name" class="col-md-4 control-label">公司名称</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control" v-model="company" v-on:change="checkCompany" autofocus>
                                 <span class="help-block" v-show="companyed">
                                        <strong style="color: red">@{{company}}已存在</strong>
                                 </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="email" class="col-md-4 control-label">管理账号</label>

                            <div class="col-md-6">
                                <input id="email" type="text" class="form-control"  v-model="admin"  v-on:change="checkAdmin"  >
                                <span class="help-block" v-show="admined">
                                        <strong style="color: red">管理账号已存在</strong>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-md-4 control-label">密码</label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" v-on:change="checkPass"  v-model="password">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password-confirm" class="col-md-4 control-label">验证密码</label>
                            <div class="col-md-6">
                                <input  type="password" class="form-control" v-on:change="checkPass" v-model="passwordconfirm">
                                <span class="help-block" v-if="passed == false">
                                        <strong style="color: red">密码不一致</strong>
                                </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                               <el-button  type="primary" v-if="can == true" v-on:click="submit" >注册</el-button>
                               <el-button v-else type="primary" :disabled="true">注册</el-button>
                               @{{can}}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script >
    var vm =new Vue({
        el:'#register',
        data:{
            company:'',
            companyed:false,
            admined:false,
            passed:true,
            admin:'',
            password:'',
            passwordconfirm:'',


        },
        created:function(){      
               

        },
        computed: {

                can:function(){
                        if( this.companyed == false && this.admined ==false && this.passed ==true && this.company!='' &&  this.password !=''){
                          return true;
                        }else{
                          return false;
                        }
                     
                },
                passed:function(){
                    if( this.password ==  this.passwordconfirm ){
                          return true;
                        }else{
                          return false;
                        }
                },

        },
        methods:{
               checkCompany(val){
                this.$http.get('/company/checkName/'+this.company).then((response) => {this.companyed=response.data; console.log(response.data)},(response) =>{ }); 
                
               },
               checkAdmin(val){
                this.$http.get('/user/checkName/'+this.admin).then((response) => {this.admined=response.data; console.log(response.data)},(response) =>{ }); 
                
               },
               checkPass(val){
                    if( this.password ==  this.passwordconfirm ){
                          this.passed= true;
                        }else{
                          this.passed= false;
                    }
                  
               },
               submit(val){
                this.$http.post('/company/register',{_token:'{{csrf_token()}}',admin:this.admin,company:this.company,password:this.password}).then((response) => {console.log(response.data)},(response) =>{ }); 
               },
        },

  });
</script>
@endsection
